<template>
<div>
	<el-dialog
		:title='title'
		class='c-dialog-fixed'
		:visible.sync='show'
		:append-to-body='inDialog'
		@open='openDialog'
		@close='closeDialog'>
		<div v-loading='loading'>
			<divider title='渠道商信息'></divider>
			<el-form
				:model='form' :rules='rules'
				ref='form' label-width='85px'
				size='mini' status-icon
				class='c-form-mini'>
				<el-form-item label='名称' prop='username' >
					<el-input v-model='form.username' placeholder='此渠道商的名称'>
					</el-input>
				</el-form-item>
				<el-form-item label='密码' prop='password' >
					<el-input type='text' v-model='form.password' placeholder='此渠道商的密码'>
					</el-input>
				</el-form-item>
				<el-form-item label='IP' prop='ip' >
					<el-input type='text' v-model='form.ip' placeholder='此渠道商的IP, 如不限制 0.0.0.0'>
					</el-input>
				</el-form-item>

				<el-form-item label='更新日期' prop='update_date'>
					<el-date-picker
							v-model='form.update_date'
							value-format='yyyy-MM-dd'
							style='width: 30%' />
				</el-form-item>

				<el-form-item label='启用状态' prop='status' >
					<el-radio-group v-model="form.status"   >
						<el-radio :label="parseInt(item.value)" v-for="item in dict.api_channel.status">{{item.name}}</el-radio>
					</el-radio-group>
				</el-form-item>
			</el-form>
		</div>
		<div slot="footer" >
	    <el-button type='primary'  @click='save(0)' :loading='loading'>保存</el-button>
	    <el-button @click="show=false">关 闭</el-button>
  	</div>
	</el-dialog>
</div>
</template>
<script>
	import api from '@/api/api/channel'
	import menuList from '@/components/sys/menu/treeList'
	import {mapState} from 'vuex'
	const formInit = {
		id:null,
		username:'',
		password:'',
		ip:'',
		create_time:'',
		status:''
	}
	export default {
		components:{
			menuList
		},
		props:{
			inDialog:{
				type:Boolean,
				default:false
			}
		},
		data(){
			return {
				status:{
					1:'启用',
					0:'不启用'
				},
				resolve:null,
				show:false,
				loading:false,
				updated:false,
				data:{ },
				factoryList:[],
				companyList:[],
				roleList:[],
				form:{ ...formInit },
				rules:{
					name:[{ required:true, message:'请填写角色名称' }]
				},
				updated:false,
				initMenu:false
			}
		},
		computed:{
			...mapState({
				dict: state => state.sys.dict,
			}),
			isEdit(){
				return this.form.id? true:false
			},
			title(){
				let title = '渠道商信息'
				if(this.isEdit){
					title += ' [ 修改 ]'
				}else{
					title += ' [ 新增 ]'
				}
				return title
			}
		},
		mounted(){

		},
		methods:{
			openDialog(){
				this.$nextTick(()=>{
					if(this.resolve){
						this.resolve(this)
						this.initMenuList()
					}
				})
			},
			open(){
				this.show = true
				return new Promise((resolve,reject)=>{
					this.resolve = resolve
				})
			},
			initMenuList(){
				if(!this.initMenu){
					this.initMenu = true
				}
			},
			closeDialog(){
				if(this.updated){
					this.$emit('updated',this.form)
				}
				this.resetFields()
			},
			getForm(id){
				this.loading = true
				api.getForm(id).then(res=>{
					this.initData(res.data)
					this.loading = false
				})
			},
			initData(data){
				this.assign(data)
				this.clearValidate()
			},
			assign(data){
				console.log(data);
				this.form = { ...this.form, ...data }
				console.log(this.form);
				return this
			},
			save(status=0){
				this.$refs.form.validate(valid=>{
					if(valid){
						this.form.action = status
						this.loading = true

						api.save(this.form).then(res=>{
							this.form.id = res.data.id
							this.loading = false
							this.$message.success('保存成功')
							this.updated = true
							this.show = false
						}).catch(res=>{
							this.loading = false
							console.log(res)
						})
					}else{
						return false
					}
				})
			},
			clearValidate(){
				this.$nextTick(()=>{
					this.$refs.form && this.$refs.form.clearValidate()
				})
			},
			resetFields(){
				this.updated = false
				this.form = { ...formInit }
				console.log(this.form);
				this.clearValidate()
				return this
			},
			test(){

			}
		}
	}
</script>
